<!-- 滚动表格配置 -->
<template>
	<div>
		<el-form-item label="可视区域行数">
			<avue-input-number v-model="main.activeOption.showCount" :min="0" :disabled="disabled"> </avue-input-number>
		</el-form-item>

		<el-form-item label="首行回调">
			<avue-switch v-model="main.activeOption.firstRowCallBack" :disabled="disabled"> </avue-switch>
		</el-form-item>
		<el-form-item label="单步回调">
			<avue-switch v-model="main.activeOption.stepCallBack" :disabled="disabled"></avue-switch>
		</el-form-item>
		<el-form-item label="立即触发" v-if="main.activeOption.stepCallBack">
			<avue-switch v-model="main.activeOption.immediateTrigger" :disabled="disabled"> </avue-switch>
		</el-form-item>
		<el-collapse accordion>
			<el-collapse-item title="表头设置">
				<el-form-item label="高度">
					<avue-input-number v-model="main.activeOption.headerHeight" :disabled="disabled"> </avue-input-number>
				</el-form-item>
				<el-form-item label="显示">
					<avue-switch v-model="main.activeOption.showHeader" :disabled="disabled"> </avue-switch>
				</el-form-item>
				<el-form-item label="背景颜色">
					<avue-input-color v-model="main.activeOption.headerBackground" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="字体大小">
					<avue-input-number v-model="main.activeOption.headerFontSize" :disabled="disabled"> </avue-input-number>
				</el-form-item>
				<el-form-item label="文字粗细">
					<avue-select v-model="main.activeOption.headerFontWeight" :disabled="disabled" :dic="dicOption.fontWeight"> </avue-select>
				</el-form-item>
				<el-form-item label="字体颜色">
					<avue-input-color v-model="main.activeOption.headerColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<!-- <el-form-item label="对其方式">
                    <avue-select
                        v-model="main.activeOption.headerTextAlign"
                        :disabled="disabled"
                        :dic="dicOption.textAlign"
                    >
                    </avue-select>
                </el-form-item> -->
			</el-collapse-item>
			<el-collapse-item title="表格设置">
				<el-form-item label="字体大小">
					<avue-input-number v-model="main.activeOption.bodyFontSize" :disabled="disabled"> </avue-input-number>
				</el-form-item>
				<el-form-item label="对其方式">
					<avue-select v-model="main.activeOption.bodyTextAlign" :disabled="disabled" :dic="dicOption.textAlign"> </avue-select>
				</el-form-item>
				<el-form-item label="文字颜色">
					<avue-input-color v-model="main.activeOption.bodyColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="奇行颜色">
					<avue-input-color v-model="main.activeOption.nthColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="偶行颜色">
					<avue-input-color v-model="main.activeOption.othColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="文字粗细">
					<avue-select v-model="main.activeOption.fontWeight" :disabled="disabled" :dic="dicOption.fontWeight"> </avue-select>
				</el-form-item>
				<!-- 首行样式设置 -->
				<el-form-item label="首行样式">
					<avue-switch v-model="main.activeOption.firstRowStyle.show" :disabled="disabled"> </avue-switch>
				</el-form-item>
				<el-form-item label="背景颜色" v-if="main.activeOption.firstRowStyle.show">
					<avue-input-color v-model="main.activeOption.firstRowStyle.bgcolor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="文字大小" v-if="main.activeOption.firstRowStyle.show">
					<avue-input-number v-model="main.activeOption.firstRowStyle.fontSize" :disabled="disabled"> </avue-input-number>
				</el-form-item>
				<el-form-item label="文字颜色" v-if="main.activeOption.firstRowStyle.show">
					<avue-input-color v-model="main.activeOption.firstRowStyle.color" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="文字粗细" v-if="main.activeOption.firstRowStyle.show">
					<avue-select v-model="main.activeOption.firstRowStyle.fontWeight" :disabled="disabled" :dic="dicOption.fontWeight"> </avue-select>
				</el-form-item>
			</el-collapse-item>
			<el-collapse-item title="固定设置">
				<el-form-item label="顶部固定方式">
					<avue-radio :button="true" v-model="main.activeOption.fixedType" :dic="dicOption.fixedType" :disabled="disabled"> </avue-radio>
				</el-form-item>
				<el-form-item label="固定行数" v-if="main.activeOption.fixedType == 'rows'">
					<avue-input-number v-model="main.activeOption.fixedCount" :min="0" :disabled="disabled"> </avue-input-number>
				</el-form-item>
				<el-form-item label="固定首行" v-if="main.activeOption.fixedType == 'field'">
					<avue-switch v-model="main.activeOption.fixedFirstRow" :disabled="disabled"></avue-switch>
				</el-form-item>
				<el-form-item label="固定字段" v-if="main.activeOption.fixedType == 'field'">
					<avue-input v-model="main.activeOption.fixedField" :disabled="disabled"> </avue-input>
				</el-form-item>
				<el-form-item label="固定判断" v-if="main.activeOption.fixedType == 'field'">
					<avue-select v-model="main.activeOption.fixedJudge" :disabled="disabled" :dic="dicOption.fixedJudge"> </avue-select>
				</el-form-item>
				<el-form-item label="固定值" v-if="main.activeOption.fixedType == 'field'">
					<avue-input v-model="main.activeOption.fixedValue" :disabled="disabled"> </avue-input>
				</el-form-item>
				<el-form-item label="固定背景色" v-if="main.activeOption.fixedType == 'field'">
					<avue-input-color v-model="main.activeOption.fixedBgColor" :disabled="disabled"> </avue-input-color>
				</el-form-item>
			</el-collapse-item>
			<el-collapse-item title="滚动设置">
				<el-form-item label="滚动速度">
					<avue-input-number v-model="main.activeOption.scrollSpeed" :disabled="disabled"> </avue-input-number>
				</el-form-item>
				<el-form-item label="时间间隔(秒)">
					<avue-input-number v-model="main.activeOption.interval" :disabled="disabled"> </avue-input-number>
				</el-form-item>
				<!-- <el-form-item label="开启滚动">
                    <avue-switch
                        v-model="main.activeOption.scroll"
                        :disabled="disabled"
                    >
                    </avue-switch>
                </el-form-item> -->
				<template v-if="main.activeOption.scroll">
					<!-- <el-form-item label="鼠标悬停">
                        <avue-switch
                            v-model="main.activeOption.hoverStop"
                            :disabled="disabled"
                        ></avue-switch>
                    </el-form-item> -->
					<!-- <el-form-item label="开始滚动数量">
                        <avue-input-number
                            v-model="main.activeOption.limitMoveNum"
                            :disabled="disabled"
                        >
                        </avue-input-number>
                    </el-form-item> -->

					<!-- <el-form-item label="遮罩字体大小">
                        <avue-input-number
                            v-model="main.activeOption.stepFontSize"
                            :disabled="disabled"
                        >
                        </avue-input-number>
                    </el-form-item> -->
					<!-- <el-form-item label="单步高亮颜色">
                        <avue-input-color
                            v-model="main.activeOption.stepBgColor"
                            :disabled="disabled"
                        ></avue-input-color>
                    </el-form-item> -->
					<!-- <el-form-item label="少数据遮罩颜色">
                        <avue-input-color
                            v-model="main.activeOption.smallDatashadowBgColor"
                            :disabled="disabled"
                        ></avue-input-color>
                    </el-form-item> -->
					<!-- <el-form-item label="单步行倍数">
                        <avue-input-number
                            v-model="
                                main.activeOption.singleScrollRowHeightTimes
                            "
                            :disabled="disabled"
                        >
                        </avue-input-number>
                    </el-form-item>
                   -->
				</template>
			</el-collapse-item>
			<!-- <el-collapse-item title="预警设置">
                <avue-crud
                    :option="tableAlarmOption"
                    :data="main.activeOption.alarmConfig"
                    @row-save="rowSaveAlarm"
                    @row-del="rowDelAlarm"
                    @row-update="rowUpdateAlarm"
                >
                </avue-crud>
            </el-collapse-item> -->
			<el-collapse-item title="表格列设置">
				<avue-crud :option="tableOption" :data="main.activeOption.column" @row-save="rowSave" @row-del="rowDel" @row-update="rowUpdate">
					<template slot="menuLeft" slot-scope="{}">
						<el-button size="mini" icon="el-icon-s-operation" @click="openCode" type="primary">编辑数据</el-button>
					</template>
				</avue-crud>
			</el-collapse-item>
		</el-collapse>
		<tableCodeEdit @submit="codeClose" v-model="code.obj" v-if="code.box" :type="code.type" :tableData="code.data" :visible.sync="code.box"></tableCodeEdit>
	</div>
</template>

<script>
import { tableOption, dicOption, tableAlarmOption } from '@/option/config';
import tableCodeEdit from '../../page/group/tableCode';
export default {
	name: 'rollHighTable',
	data() {
		return {
			disabled: this.contain.activeObj.isLock,
			dicOption: dicOption,
			tableOption: tableOption,
			tableAlarmOption: tableAlarmOption,
			code: {
				box: false,
				type: 'data',
				data: [],
				obj: {}
			}
		};
	},
	inject: ['main', 'contain'],
	components: {
		tableCodeEdit
	},
	methods: {
		rowSave(row, done) {
			this.main.activeOption.column.push(this.deepClone(row));
			done();
		},
		rowDel(row, index) {
			this.main.activeOption.column.splice(index, 1);
		},
		rowUpdate(row, index, done) {
			this.main.activeOption.column.splice(index, 1, this.deepClone(row));
			done();
		},
		rowSaveAlarm(row, done) {
			this.main.activeOption.alarmConfig.push(this.deepClone(row));
			done();
		},
		rowDelAlarm(row, index) {
			this.main.activeOption.alarmConfig.splice(index, 1);
		},
		rowUpdateAlarm(row, index, done) {
			this.main.activeOption.alarmConfig.splice(index, 1, this.deepClone(row));
			done();
		},
		codeClose(value) {
			this.main.activeOption.column = value;
		},
		openCode() {
			let dataRes = JSON.parse(this.contain.dataRes || '[]');
			this.code.data = dataRes;
			this.code.obj = this.main.activeOption.column;
			this.code.box = true;
		},
		handleRowClick(row, event, column) {
			this.$refs.crud.rowEdit(row, row.$index);
		}
	}
};
</script>

<style></style>
